// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Modal, Toast } from 'antd-mobile-rn';

// 引入 处理数据 所需文件
import { orderDel, orderConfirmReceipt, orderSubmit, orderRefund } from '../../module/module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { RnButton } from '../../components/index.js'

// 引入工具包
import { press, size, ScreenWidth, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage, handleAppraise } from '../../util/utils.js'

class OrderOperation extends Component {

	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {}
	}

	orderDel() {
		const { order, onOperationEnd, onDelete } = this.props
		orderDel({ orderNo: order.orderNo }).then(res => {
			console.log(res)
			Toast.success('删除成功')
			onDelete(res)
		}).catch(error => {
			Toast.success('删除失败')
			console.log(error)
		})
	}

	orderConfirmReceipt() {
		const { order, onOperationEnd } = this.props
		orderConfirmReceipt({ orderNo: order.orderNo }).then(res => {
			console.log(res)
			onOperationEnd(res)
		}).catch(error => {
			Toast.success('收货失败')
			console.log(error)
		})
	}

	isOrderConfirmReceipt() {
		Modal.alert('收货', '确认收货', [
			{
				text: '取消',
				onPress: () => { },
				style: 'cancel',
			},
			{ text: '确定', onPress: () => this.orderConfirmReceipt() },
		]);
	}

	isOrderDel() {
		Modal.alert('删除', '确认删除订单', [
			{
				text: '取消',
				onPress: () => { },
				style: 'cancel',
			},
			{ text: '确定', onPress: () => this.orderDel() },
		]);
	}

	handleOrderRefund() {
		Modal.prompt(
			'申请退款',
			'请填写退款理由',
			reason => this.orderRefund(reason),
			'default'
		)
		// Modal.alert('申请退款', '确认申请退款', [
		// 	{
		// 		text: '取消',
		// 		onPress: () => { },
		// 		style: 'cancel',
		// 	},
		// 	{ text: '确定', onPress: () => this.orderRefund() },
		// ]);
	}

	orderRefund(reason) {
		const { order, onOperationEnd } = this.props
		console.log(reason)
		if (reason.legnth < 5) {
			Toast.info('请至少输入5个字的理由')
			return
		}
		orderRefund({
			orderNo: order.orderNo,
			reason
		}).then(res => {
			console.log(res)
			onOperationEnd(res)
		}).catch(error => {
			console.log(error)
		})
	}


	render() {
		const { order } = this.props

		// '待付款'
		if (order.status == 1) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<RnButton
						type="danger"
						onPress={() => {
							this.isOrderDel()
						}}
					>删除订单</RnButton>
					<TouchableOpacity
						onPress={() => {
							Actions.selectPay(order)
						}}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>立即付款</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '待发货'
		if (order.status == 2) {
			if (order.refundEnabled == 1) {
				return (
					<View style={{
						flexDirection: 'row',
						alignItems: 'center',
					}}>

						<TouchableOpacity
							onPress={() => {
								this.handleOrderRefund()
							}}
							style={{
								width: 80,
								height: 30,
								marginLeft: 15,
								borderRadius: 4,
								borderWidth: 0.5,
								borderColor: '#F04844',
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
							}}
						>

							<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>申请退款</Text>
						</TouchableOpacity>
					</View>
				)
			}
		}

		// '待收货'
		if (order.status == 3) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					{order.status == 3 || order.status == 4 || order.status == 5 && (
						<TouchableOpacity
							onPress={() => {
								Actions.logistics({ logisticsOrderNo: order.logisticsOrderNo })
							}}
							style={{
								width: 80,
								height: 30,
								marginLeft: 15,
								borderRadius: 4,
								borderWidth: 0.5,
								borderColor: '#F04844',
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
							}}
						>

							<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>查看物流</Text>
						</TouchableOpacity>
					)}
					<TouchableOpacity
						onPress={() => { this.isOrderConfirmReceipt() }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>确认收货</Text>
					</TouchableOpacity>
				</View>
			)
		}

		// '已完成'
		if (order.status == 4) {
			const { orderType } = this.props
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					{orderType == 'list' && handleAppraise(order) && (
						<TouchableOpacity
							onPress={() => { Actions.orderInfo({ order: order }) }}
							style={{
								width: 80,
								height: 30,
								marginRight: 15,
								borderRadius: 4,
								borderWidth: 0.5,
								borderColor: '#F04844',
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
							}}
						>

							<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>发布评论</Text>
						</TouchableOpacity>
					)}
					<RnButton
						type="danger"
						onPress={() => {
							this.isOrderDel()
						}}
					>删除订单</RnButton>
					{/* <TouchableOpacity
						onPress={() => { }}
						style={{
							width: 80,
							height: 30,
							marginLeft: 15,
							borderRadius: 4,
							borderWidth: 0.5,
							borderColor: '#F04844',
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}
					>

						<Text style={{ fontSize: 14, color: '#F04844', lineHeight: 16, }}>申请售后</Text>
					</TouchableOpacity> */}
				</View>
			)
		}

		// '已取消'
		if (order.status == 5) {
			return (
				<View style={{
					flexDirection: 'row',
					alignItems: 'center',
				}}>
					<RnButton
						type="danger"
						onPress={() => {
							this.isOrderDel()
						}}
					>删除订单</RnButton>
				</View>
			)
		}
		return null
	}
}

export default pureRender(OrderOperation)
